<template>
	<view class="track-details-comp">
		<view class="title c-flex jc-between c-item-center">
			<view class="c-flex jc-start c-item-center">
				<image v-if="dataObj.vehicleType == '2'"  :src="remoteImgUrl+'send-track-car.png'" mode="" style="width:80rpx;height:50rpx;margin-right:12rpx;"></image>
				<image v-if="dataObj.vehicleType == '1'"  :src="remoteImgUrl+'send-track-car3.png'" mode="" style="width:70rpx;height:50rpx;margin-right:12rpx;"></image>
				<view>{{dataObj.licensePlate||''}}</view>
				<image  :src="remoteImgUrl+'send-track-carinfo.png'" @click="onViewDriver" mode="" style="width:32rpx;height:26rpx;margin-left:12rpx;"></image>
			</view>
			<view >
				<image class="status" v-if="dataObj.status == -1" src="@/static/images/project/project-status-nostart.png"></image>
				<image class="status" v-if="dataObj.status == 0" src="@/static/images/project/project-status-zj.png"></image>
				<image class="status" v-if="dataObj.status == 1 " src="@/static/images/project/project-status-jg.png"></image>
				<image class="status" v-if="dataObj.status == 2 " src="@/static/images/project/project-status-tg.png"></image>
			</view>
		</view>
		<view class="p-content">
			<view class="c-flex jc-center jc-between c-item-center">
				<view class="p-c-item c-flex c-item-center" >
					<text>司机：</text> <text>{{dataObj.driverName||''}}</text>
					<image  :src="remoteImgUrl+'send-track-zz.png'" style="width:32rpx;height:24rpx;margin-left:12rpx;"></image>
				</view>
				<view class="p-c-item" >
					<text>电话：</text> <text>{{dataObj.driverPhone||''}}</text>
				</view>
			</view>
			<view class="c-flex jc-center jc-between">
				<view class="p-c-item" >
					<text>速度：</text> <text >{{dataObj.speed/10}}公里/时</text>
				</view>
				<view class="p-c-item" >
					<text>燃气泄漏报警：</text> <text style="color:#3C80FE;">{{dataObj.warnBit||'正常'}}</text>
				</view>
			</view>
			<view class="p-c-item" >
				<text>时间：</text> <text>{{dataObj.deviceTime||''}}</text>
			</view>
			<view class="p-c-item" >
				<text>位置：</text> <text>{{address}}</text>
			</view>
			<view class="location c-flex  c-item-center">
				<view class="view-video">查看视频</view>
				<view class="view-track"  v-if="pType == 1" @click="onViewMoreTrack">查看更多轨迹</view>
				<image class="refresh" :src="remoteImgUrl+'send-track-refresh.png'" @click="onRefresh"></image>
			</view>
		</view>
		<!-- 车辆信息 -->
		<uni-popup ref="carPop" type="center" :animation="false">
			<view class="card-content">
				<view class="title">车辆详情</view>
				<view class="car-item-info">
					<text>所属公司：</text><text>{{dataObj.tenantName}}</text>
				</view>
				<view class="car-item-info">
					<text>车辆年检：</text><text>{{dataObj.nextCheckTime}}</text>
				</view>
				<view class="car-item-info">
					<text>车辆报废：</text><text>{{dataObj.preExpireTime}}</text>
				</view>
				<view class="item">行驶证详情：</view>
				<view class="photo c-flex ">
					<image :src="dataObj.licensePhotos1"></image>
					<image :src="dataObj.licensePhotos2"></image>
				</view>
				<view class="oper c-flex jc-center">
					<view class="close-bt" @click="onClose">关闭</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default{
		props:{
			dataObj:{
				type:Object,
				default:{}
			},
			pType:{
				type:Number,
				default:1
			}
		},
		data(){
			return {
				address:'',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/energy/',
			}
		},
		watch:{
			dataObj:function(newv){
				if(newv)
				this.getAddress();
			}
		},
		mounted() {
			this.getAddress();
		},
		methods:{
			getAddress(){
				const that = this;
				this.qqmapsdk.reverseGeocoder({
						location: { latitude: Number(this.dataObj.latitude), longitude: Number(this.dataObj.longitude) },
						success:function(addr){
							let data = addr.result.address_reference.landmark_l1 || addr.result.address_reference.landmark_l2;
							// that.address = data.title || '';
							console.log('当前位置:',addr)
							that.address = addr.result.formatted_addresses.recommend || '';
					},
					fail: function(error) {
						console.log(error)
					},
				});
			},
			onViewDriver(){
				this.$refs.carPop.open();
			},
			onClose(){
				this.$refs.carPop.close();
			},
			onRefresh(){
				this.$emit('onRefresh')
			},
			onViewMoreTrack(){
				uni.navigateTo({
					url:'/pages/liquefied/send-track/send-track?data='+JSON.stringify(this.dataObj)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.track-details-comp{
		.title{
			font-size: 30rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #333333;
			.status{width:72rpx;height:36rpx;}
		}
		.p-content{
			margin: 16rpx 80rpx 20rpx 0;
			.p-c-item{margin-bottom: 16rpx;
				text:first-child{font-size: 24rpx;color: #666666;}
				text:nth-child(2){font-size: 24rpx;color: #333333;font-weight: 600;}
			}
			.location{
				margin-top: 28rpx;font-family: PingFangSC, PingFang SC;position:relative;
				image{width: 27rpx;height: 26rpx;margin-right:6rpx;}
				text{font-size: 20rpx;color: #666666;}
				.view-video,.view-track{padding:12rpx 24rpx; }
				.view-video{
					font-weight: 500;font-size: 12px;color: #FFFFFF;
					background: #3C80FE;border-radius: 23px;margin-right: 36rpx;
				}
				.view-track{
					font-weight: 500;font-size: 12px;color: #3C80FE;background: rgba(60, 128, 254, 0.1);
					border-radius: 23px;
				}
				.refresh{width:52rpx;height:45rpx;position:absolute;right:-70rpx;bottom:5rpx;}
			}
		}
		.card-content{
			width: 618rpx;height: 650rpx;background: #FFFFFF;border-radius: 16rpx;padding:48rpx 52rpx 32rpx;font-family: PingFangSC, PingFang SC;
			.title{font-weight: 500;font-size: 32rpx;color: #030303;text-align: center;margin-bottom:48rpx;}
		}
		.car-item-info{
			margin-bottom:24rpx;
			text:first-child{font-weight: 500;font-size: 30rpx;color: #9B9B9B;}
			text:last-child{font-weight: 500;font-size: 30rpx;color: #030303;}
		}
		.photo{
			gap:24rpx;margin-top: 24rpx;
			image{width: 188rpx;height: 134rpx;}
		}
		.oper{
			text-align: center;margin-top:58rpx;
			.close-bt{
				width: 176rpx;height: 64rpx;line-height: 64rpx;border-radius: 34rpx;border: 2rpx solid #3C80FE;
				font-weight: 500;font-size: 32rpx;color: #3C80FE;
			}
		}
	}
</style>